<template>
	<view class="content">
		<view :class="{'expanded': isExpanded}" class="image-container">
			<!-- 图片或长内容 -->
			<image :src="imageUrl" mode="widthFix"></image>
		</view>
		<view class="dianji" @click="toggleExpand">
			{{ isExpanded ? '收起' : '查看更多' }}
			<u-icon v-if="isExpanded" name="arrow-up" color="#3488ff" size="12"></u-icon>
			<u-icon v-else name="arrow-down" color="#3488ff" size="12"></u-icon>
		</view>
		<view class="target">
			<view class="targetTop">
				<view class="targetcolor1">-如何达到申请指标-</view>
				<view class="targetcolor3">达到一下任意一种标准即可申请</view>
			</view>
			 
			<view :class="['targetli diFlex ',ischeckAgentStatus == 1 ? 'grayed-out' : '']">
				<view class="targetlileft">
					<image src="https://img-cdn.duobashuzi.com/xianggui/img/xfje.png" mode="widthFix"></image>
				</view>
				<view class="targetliright diFlex">
					<view class="targetlitext">
						<view class="targetcolor2">消费金额满1元</view>
						<view class="targetcolor3">还需购买1元</view>
					</view>
					<view v-if="ischeckAgentStatus == 0" class="xiaofei" @click="onxiaofei">去消费</view>
				</view>
			</view>
			<view :class="['targetli diFlex ',ischeckAgentStatus == 1 ? 'grayed-out' : '']">
				<view class="targetlileft">
					<image src="https://img-cdn.duobashuzi.com/xianggui/img/xfbs.png" mode="widthFix"></image>
				</view>
				<view class="targetliright diFlex" style="border-bottom: none;">
					<view class="targetlitext">
						<view class="targetcolor2">消费笔数满1笔</view>
						<view class="targetcolor3">还需购买1笔</view>
					</view>
					<view class="xiaofei" v-if="ischeckAgentStatus == 0" @click="onxiaofei">去消费</view>
				</view>
			</view>
		</view>
		<view class="kong"></view>
		<view class="fenxiao">
			<button v-if="memberLevel == 0"  class="login-button" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号，成为分销员</button>
			
			<u-button v-else-if='ischeckAgentStatus == 1' shape="circle" color="linear-gradient(to right, #ffa61d, #ff770f)" text="已成为分销员" ></u-button>
			<u-button v-else color="linear-gradient(to right, #ffa61d, #ff770f)" text="申请成为分销员" @click="onDistribution"></u-button>
		</view>
	</view>
</template>

<script>
	import {getPhoneNumber,getUserInfo,xgjUserSubAgent,checkAgentStatus} from '@/api/my.js'
	export default {
		data() {
			return {
				memberLevel:0,
				imageUrl: 'https://img-cdn.duobashuzi.com/xianggui/img/cimg_1.jpg',
				isExpanded: false ,// 控制展开状态
				ischeckAgentStatus:0,
			};
		},
		onShow(){
			this.getInfo();
			this.getcheckAgentStatus();
		},
		methods: {
			
			getInfo(){
				getUserInfo({}).then(res=>{
					console.log(res)
					this.memberLevel = res.data.member_level
				})
			},
			getcheckAgentStatus(){
				checkAgentStatus({}).then(res=>{
					this.ischeckAgentStatus =  res.data;
					console.log(res.data)
				})
			},
			//点击切换
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},
			//跳转首页
			onxiaofei(){
				uni.switchTab({
					url: '/pages/active/index'
				});
			},
			//点击申请成为分销人员
			onDistribution(){
				xgjUserSubAgent({}).then(res=>{
					console.log(res)
					uni.showModal({
						title: '温馨提示',
						content: res.msg,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							}
						}
					});
					// this.memberLevel = res.data.member_level
				}).catch(err=>{
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			// 微信手机号授权
			onGetPhoneNumber(e) {
				// this.privacy()
				if (e.detail.encryptedData) {
					// 使用微信解密接口（需配合后端）
					console.log("微信手机号登录成功:", e.detail);
					console.log("微信手机号登录成功:", e.detail.encryptedData);
					if(e.detail.errMsg==='getPhoneNumber:ok'){
						const data = {
							mallId:30,
							mobile:e.detail.code
						}
						getPhoneNumber(data).then(res=>{
							this.memberLevel = res.member_level;
							uni.setStorageSync('memberLevel',res.member_level);
							this.onDistribution();
						}).catch(err=>{
							uni.showToast({
								title:err.msg,
								icon:'none'
							})
						})
					}
					
				} else {}
			},
		}
	};
</script>

<style lang="less">
	.grayed-out {
	  filter: grayscale(100%); /* 设置灰度为 100% */
	}
	.content {
		position: relative;
		min-height: 100vh;
		background: #f8f8f8;
		.login-button{
			background: linear-gradient(to right, #ffa61d, #ff770f);
			color: #fff;
			font-size: 14px;
			border-radius: 20px;
			border: none;
		}
		.image-container {
			max-height: 500px;
			/* 默认最大高度 */
			overflow: hidden;
			transition: max-height 0.3s ease-in-out;
			/* 平滑过渡 */
			image{
				display: block;
				width: 100%;
			}
		}
		
		.image-container.expanded {
			max-height: none;
			/* 展开时不限制高度 */
		}
		.dianji{
			width: 100%;
			height: 20px;
			color: #3488ff;
			line-height: 20px;
			font-size: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			box-shadow:0 -5px 10px #fff;
		}
		.fenxiao{
			width: 90%;
			padding: 10px 5%;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			box-shadow:0 -5px 5px #e8e8e9;
		}
		.target{
			width: 100%;
			margin: 10px 0 0 0;
			background: #fff;
			.targetTop{
				text-align: center;
				padding: 10px 0;
				line-height: 25px;
			}
			.targetli{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.targetlileft{
					width: 40px;
					height: 40px;
					margin: 0 15px;
					background: #ecf8e5;
					border-radius: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					image{
						display: block;
						width: 30px;
						height: 30px;
					}
				}
				.targetliright{
					width: 80%;
					border-bottom: 1px solid #ccc;
					padding: 5px 0;
					align-items: center;
					.xiaofei{
						width: 60px;
						height: 25px;
						line-height: 25px;
						text-align: center;
						border: 1px solid #17c56a;
						font-size: 14px;
						color: #17c56a;
						border-radius: 20px;
						margin-right: 10px;
					}
				}
				
			}
			
		}
		.kong{
			height: 70px;
		}
		.targetcolor1{
			font-size: 16px;
			color: #323232;
		}
		.targetcolor2{
			font-size: 14px;
			color: #323232;
		}
		.targetcolor3{
			font-size: 12px;
			color: #bababa;
		}
	}
	
	
</style>